<!-- Dom模板 -->
<template>
  <div class="curriculusetset">
    <!-- Dom内容 -->
    <p class="addtitle">
      课程列表 <el-button type="success" @click="close()">添加课程</el-button>
    </p>
    <div style="max-height: 790px; overflow-y: auto">
      <el-table
        ref="multipleTable"
        :data="numdata"
        tooltip-effect="dark"
        size="width: 100%;"
        max-height="950px;"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" size="width:5%"> </el-table-column>
        //input
        <el-table-column
          prop="cid"
          label="编号"
          size="width:5%"
        ></el-table-column>
        <el-table-column
          prop="classTitle"
          label="名称"
          size="width:20%"
        ></el-table-column>
        <el-table-column label="状态" size="width:10%">
          <template slot-scope="scope">{{
            scope.row.statebar === 1 ? "上传" : "下架"
          }}</template>
        </el-table-column>
        <el-table-column prop="classImg" label="活动封面" size="width:15%">
          <template slot-scope="scope">
            <img :src="scope.row.classImg" alt="" width="80px" height="40px" />
          </template>
        </el-table-column>
        <el-table-column
          prop="jiNeng"
          label="分类"
          size="width:10%"
        ></el-table-column>
        <el-table-column
          prop="shopping"
          label="人数"
          size="width:10%"
        ></el-table-column>
        <el-table-column prop="person" label="上传人" size="width:10%">
          <template>张三</template>
        </el-table-column>
        <el-table-column prop="time" label="上传时间" size="width:10%">
          <template>{{ new Date().toLocaleDateString() }}</template>
        </el-table-column>
        <el-table-column label="操作" size="width:10%">
          <template slot-scope="scope"
            ><div class="operation" :id="scope.row.id" :cid="scope.row.cid">
              <span @click="open">编辑</span>
              <span @click="setstatebar">{{
                scope.row.statebar === 1 ? "上传" : "下架"
              }}</span>
              <span @click="removeitem">删除</span>
            </div></template
          >
        </el-table-column>
      </el-table>
    </div>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="this.data.length"
      >
      </el-pagination>
    </div>
    <!-- 编辑 -->
    <div v-if="this.flag" class="meng"></div>
    <div v-if="this.flag" class="alert">
      <Myalert :item="this.item" @setflag="setflag"></Myalert>
    </div>
  </div>
</template>

<script>
// import a from './a'; // 引入组件
import Myalert from "../../../components/alert/myalert.vue";
export default {
  name: "",
  components: { Myalert },
  data() {
    return {
      msg: "测试",
      data: [],
      numdata: [],
      numlist: 5,
      currentPage: 1,
      item: {},
      flag: false,
    };
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.getdata();
  },
  // Vue方法定义this.data
  methods: {
    async getdata() {
      this.data = [];
      await this.$axios.get("/api/answer/curriculum").then((res) => {
        res.data.forEach((item) => {
          let list = JSON.parse(item.teacherClassList);
          list.forEach((it) => {
            it.id = item.id;
          });
          this.data.push(...list);
        });
      });

      this.getnumdata();
    },
    // 截取渲染数据
    getnumdata() {
      let start = (this.currentPage - 1) * this.numlist;
      let end = this.currentPage * this.numlist;
      this.numdata = this.data.slice(start, end);
    },
    // 注册添加事件开关
    close() {
      this.$emit("close", false);
    },

    // 上架下架
    setstatebar(ev) {
      let cid = ev.target.parentNode.attributes["cid"].value;
      let id = ev.target.parentNode.attributes["id"].value;

      this.$axios.post("/api/answer/setstatebar", { id, cid });
      this.getdata();
    },
    // 删除
    removeitem(ev) {
      let cid = ev.target.parentNode.attributes["cid"].value;
      let id = ev.target.parentNode.attributes["id"].value;
      this.$axios.post("/api/answer/removeitem", { id, cid });
      this.getdata();
    },
    // 全选反选
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 页码条数
    handleSizeChange(val) {
      this.numlist = val;
      this.getnumdata();
    },
    // 页码页数
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getnumdata();
    },

    // 弹框/编辑
    open(ev) {
      let cid = ev.target.parentNode.attributes["cid"].value;
      let id = ev.target.parentNode.attributes["id"].value;
      this.item = { cid, id };
      this.setflag(true);
    },
    setflag(val, type) {
      if (val) {
         this.flag = val;
      } else {
        if(type){
           this.getdata();
        }
        this.flag = val;
      }
    },
  },
};
</script>

<style scoped>
/* @import url(''); 引入css类 */
.curriculusetset {
  /* min-width: 1100px; */
  margin: 20px;
  padding: 20px;
  background: white;
}
.addtitle > button {
  float: right;
  position: relative;
  top: -7px;
}
.addtitle {
  border-bottom: 1px solid #ccc;
  padding-bottom: 20px;
}
.operation > span {
  padding: 0 2px;
}
.block {
  overflow: hidden;
  width: 1134px;
  margin-top: 15px;
}
.el-pagination {
  float: right;
}

.meng {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: black;
  opacity: 0.5;
  z-index: 2;
}
.alert {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>